<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天</title>
    <link rel="stylesheet" href="../../css/mdui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body class="mdui-appbar-with-toolbar mdui-color-grey-50">

    <!-- 顶部导航栏 -->
    <header>
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="./index.html" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">arrow_back</i></a>
                <a href="../index.html" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <!-- 一个通知按钮 -->
                <a href="../Personal/notice.html">
                    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
                                    <i class="mdui-icon material-icons">notifications</i>
                                </span>
                </a>

                <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-menu="{target: '#login-menu'}">
                                <i class="mdui-icon material-icons">account_circle</i>
                            </span>
                <!-- 小菜单 -->
                <ul class="mdui-menu mdui-menu-cascade mdui-menu-cascade-custom" id="login-menu">
                    <li class="mdui-menu-item">
                        <div class="mdui-row mdui-valign">
                            <div class="mdui-col-md-3 mdui-m-l-3">
                                <div class="user-head-img mdui-img-circle" style="background: url(../../images/touxiang1.jpg);"></div>
                            </div>
                            <div class="mdui-col-md-7 mdui-typo">
                                <div>姓名：李老师</div>
                                <div>工号：91145</div>
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider"></li>
                    <li class="mdui-menu-item">
                        <a href="../Personal/notice.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">notifications_none</i>我的通知
                        </a>
                        <a href="../Personal/message.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">chat_bubble_outline</i>我的留言
                        </a>
                        <a href="../Personal/setting.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">settings</i>设置
                        </a>
                        <a href="../../login.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">exit_to_app</i>登出
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->

    <!-- 讨论列表 -->
    <article>
        <p></p>
        <div class="mdui-container">
            <div class="mdui-card">
                <!-- 卡片的标题和副标题 -->
                <div class="mdui-card-primary">
                    <div class="mdui-card-primary-title">关于操作系统的问题</div>
                    <div class="mdui-card-primary-subtitle">发布于 2019-6-2 11:49:15</div>
                </div>

                <div class="mdui-divider"></div>

                <!-- 卡片头部，包含头像、标题、副标题 -->
                <div class="mdui-card-header">
                    <img class="mdui-card-header-avatar" src="../../images/touxiang1.jpg" />
                    <div class="mdui-card-header-title">刘同学</div>
                    <div class="mdui-card-header-subtitle">计算机科学与技术</div>
                </div>

                <!-- 卡片的内容 -->
                <div class="mdui-card-content">
                    <p>进程有哪几种状态？</p>
                    <p>分页和分段有什么区别？</p>
                    <p>操作系统中进程调度策略有哪几种？</p>
                    <p>什么是死锁？死锁产生的条件？</p>
                </div>

                <!-- 卡片的按钮 -->
                <div class="mdui-card-actions">
                    <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-pink-accent" mdui-dialog="{target: '#chat'}">回复</button>
                </div>
            </div>

            <div class="mdui-dialog" id="chat">
                <div class="mdui-dialog-title">写回复</div>
                <div class="mdui-dialog-content">
                    <div class="mdui-textfield">
                        <textarea class="mdui-textfield-input" rows="4" placeholder="请输入要回复的内容"></textarea>
                    </div>
                </div>
                <div class="mdui-dialog-actions">
                    <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>发布</button>
                </div>
            </div>

            <!-- 统计回答 -->

            <div class="mdui-typo">
                <h4>共 3 个回答</h4>
            </div>

            <!-- 回答列表 -->

            <div class="mdui-card">

                <!-- 卡片的内容 -->
                <div class="mdui-card-content">

                    <ul class="mdui-list">
                        <li class="mdui-list-item mdui-ripple">
                            <div class="mdui-list-item-avatar"><img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/avatar1.jpg" /></div>
                            <div class="mdui-list-item-content">
                                <div class="mdui-list-item-title mdui-list-item-one-line">王同学
                                    <span class="mdui-typo-caption-opacity">2019-6-25 10:48:06</span>
                                </div>
                                <div class="mdui-list-item-text">
                                    一般来说，进程有三个状态，即就绪状态，运行状态，阻塞状态。
                                </div>
                            </div>
                        </li>
                        <li class="mdui-divider-inset"></li>
                        <li class="mdui-list-item mdui-ripple">
                            <div class="mdui-list-item-avatar"><img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/avatar2.jpg" /></div>
                            <div class="mdui-list-item-content">
                                <div class="mdui-list-item-title mdui-list-item-one-line">李同学
                                    <span class="mdui-typo-caption-opacity">2019-6-10 10:48:06</span>
                                </div>
                                <div class="mdui-list-item-text">
                                    同问，这个问题该怎么解决
                                </div>
                            </div>
                        </li>
                        <li class="mdui-divider-inset"></li>
                        <li class="mdui-list-item mdui-ripple">
                            <div class="mdui-list-item-avatar"><img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/avatar4.jpg" /></div>
                            <div class="mdui-list-item-content">
                                <div class="mdui-list-item-title mdui-list-item-one-line">赵同学
                                    <span class="mdui-typo-caption-opacity">2018-6-6 10:48:06</span>
                                </div>
                                <div class="mdui-list-item-text">
                                    占楼，同问
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>

            </div>

        </div>

    </article>




    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>

    <script src="../../js/mdui.js"></script>
</body>

</html>